<template>
	<view class="inputs-box">
		<view class="item" v-for="(x, index) in item" :key="x._$key">
			<view class="item-box">
				<view
					class="input-box"
					:style="{ width: `calc(${i.width || 50}% - 4rpx)` }"
					v-for="(i, key) in keys.child"
					:key="key"
					:class="errShow(index, i.key) && 'error-input'"
				>
					<label style="white-space: nowrap;">{{ i.lable }}</label>
					<component class="component" :style="i.style" :is="i.type" :keys="i" @input="childChange($event, i.key, index)" :value="x[i.key || keys.key]"></component>
					<view class="error-prompt" v-if="errShow(index, i.key)">{{ errShow(index, i.key) }}</view>
				</view>
			</view>
			<view class="btns">
				<view class="formicon form-jia btn-warn" @click="del(index)"></view>
				<view v-if="index == item.length - 1" class="btn-primary formicon form-jia" @click="add"></view>
			</view>
		</view>
		<view style="display: flex;justify-content: flex-end;" v-if="!item.length"><view class="btn-primary formicon form-jia" @click="add"></view></view>
	</view>
</template>

<script>
import yInput from './y-input.vue';
import yPicker from './y-picker.vue';
import form from './formValidation.js';
import yUpload from './y-upload';
import yTextarea from './y-textarea.vue';
import yChange from './y-change.vue';
export default {
	name: 'yChange',
	components: {
		yInput,
		yPicker,
		yUpload,
		yTextarea,
		yChange
	},
	props: {
		value: {
			type: [Array, Object, String],
			default() {
				return [];
			}
		},
		keys: {}
	},
	watch: {
		value: {
			handler(n, v) {
				if (Array.isArray(n)) {
					this.item = n;
				} else {
					this.item = [];
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			item: [],
			valueArr: [],
			errorPrompt: []
		};
	},
	methods: {
		//错误显示
		errShow(index, key) {
			return (this.errorPrompt[index] || {})[key || this.keys.key];
		},
		//子组件 KEY 如果存在 则使用,没有则使用父组件KEY
		childChange(value, key, index) {
			this.item[index][key || this.keys.key] = value;
			this.updata();
		},
		//单项检测
		oneVerifi(_x, _index) {
			const rules = this.keys.child || [];
			return Promise.all(
				rules.map(x => {
					const name = x.key || this.keys.key;
					if (x.hide) return '';
					return form
						.validation(_x, [
							{
								name,
								...(x.rules || {})
							}
						])
						.then(msg => {
							let err = this.errorPrompt[_index] || {};
							err[name] = msg;
							this.$set(this.errorPrompt, _index, err);
							return msg;
						});
				})
			).then(res => {
				return res.join('');
			});
		},
		//全部检测
		verifi() {
			return Promise.all(this.item.map(this.oneVerifi)).then(res => !res.join(''));
		},
		add() {
			this.verifi().then(res => {
				if (res) {
					this.item.push({
						_$key: Math.random()
					});
				}
			});
		},
		del(index) {
			this.item.splice(index, 1);
			this.updata();
		},
		updata() {
			this.verifi().then(res => {
				if (!res) return '';
				let v = this.item.length ? [...this.item] : '';
				this.$emit('change', v);
				this.$emit('input', v);
			});
		}
	}
};
</script>

<style lang="scss">
@import url(./error.css);

.inputs-box {
	flex: 1;

	.item {
		display: flex;
		margin: 10rpx 0;
		padding: 10rpx 0;

		.item-box {
			flex: 1;
			display: flex;
			align-items: flex-start;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			position: relative;

			.input-box {
				display: flex;
				position: relative;
				margin: 2rpx;
				width: calc(50% - 8rpx);
				text-align: right;
				.component {
					flex: 1;
					text-align: left;
					box-shadow: 0 0 0 1rpx rgba(0, 0, 0, 0.02) inset;
					border-radius: 8rpx;
					margin: 0 10rpx 10rpx 0;
					padding: 5rpx;
				}
			}
		}

		.btns {
			white-space: nowrap;
			display: flex;
			flex-direction: column;

			.formicon {
				margin: 0 0 10rpx 10rpx;
			}
		}
	}

	.form-jia {
		border-radius: 50%;
		background-color: #007aff;
		color: #ffffff;
		font-size: 20rpx;
		width: 2.5em;
		height: 2.5em;
		line-height: 2.5em;
		display: flex;
		justify-content: center;
		align-items: center;

		&.btn-warn {
			background-color: #e64340;
			transform: rotateZ(45deg);
		}
	}
}
</style>
